<template>
  <scroll-view class="scroll-view" scroll-y>
    <view class="voice-icon-btns">
      <view class="voice-icon-btn" v-for="(item, index) in examVoiceMockList" :key="index" @tap="playVoice(item.path!)">
        <image class="icon-img" :src="item.icon" mode="widthFix" />
        <view class="icon-name">{{ item.name }}</view>
      </view>
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { onLoad, onUnload } from '@dcloudio/uni-app'
  import type { ExamVoiceMockVo } from '@/api/home/types'

  import { useBaseInfo } from '@/composables/LearnBase'

  import { getExamVoiceMockListApi } from '@/api/home'

  // 题库信息
  const baseInfo = useBaseInfo()

  // 考试语音模拟数据
  const examVoiceMockList = ref<ExamVoiceMockVo[]>([])
  // 音频
  const innerAudioContext = uni.createInnerAudioContext();

  // 获取考试语音模拟数据
  const getExamVoiceMockList = async () => {
    let result = await getExamVoiceMockListApi(baseInfo.driveType!)
    examVoiceMockList.value = result.data
  }

  onLoad(async (options: any) => {
    uni.showLoading({
      title: '数据加载中',
    })
    await getExamVoiceMockList()
    uni.hideLoading()
  })

  const playVoice = (path: string) => {
    innerAudioContext.src = path
    innerAudioContext.play()
  }

  onUnload(() => {
    innerAudioContext.stop()
  })
</script>

<style lang="scss" scoped>
  .scroll-view {
    display: flex;
    flex-direction: column;
    padding: 0rpx 30rpx;
  }

  .voice-icon-btns {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .voice-icon-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 44rpx;
      width: 25%;

      .icon-img {
        width: 75rpx;
      }
    }
  }
</style>
